<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Flat UI Free</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Loading Bootstrap -->
<link href="../../dist/css/vendor/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">

<!-- Loading Flat UI -->
<link href="../../dist/css/flat-ui.css" rel="stylesheet">

<link rel="shortcut icon" href="../../dist/img/favicon.ico">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
      <script src="../../dist/js/vendor/html5shiv.js"></script>
      <script src="../../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<div class="container">
		<h4>Tagsinput</h4>
		<div class="row">
			<div class="col-md-7 mtl">
				<h5 class="demo-panel-title">Tags Input</h5>
				<input name="tagsinput-01" class="tagsinput"
					value="Clean, Fresh, Modern, Unique" />
				<h5 class="demo-panel-title">Tags Input Primary with typeahead
					functionality</h5>
				<div class="tagsinput-primary">
					<input name="tagsinput-02"
						class="tagsinput tagsinput-typeahead input-lg" value="Alabama" />
				</div>

				<h5 class="demo-panel-title">Typeahead only</h5>
				<div class="form-group">
					<input class="form-control typeahead-only input-lg" type="text"
						id="typeahead-demo-01" />
				</div>

				<h5 class="demo-panel-title">Typeahead with feedback icons</h5>
				<p>Huge</p>
				<div class="form-group">
					<input class="form-control typeahead-only input-hg" type="text"
						id="typeahead-demo-01" /> <span
						class="form-control-feedback control-feedback-hg fui-location"></span>
				</div>

				<p>Default</p>
				<div class="form-group">
					<input class="form-control typeahead-only" type="text"
						id="typeahead-demo-01" /> <span
						class="form-control-feedback fui-location"></span>
				</div>

				<p>Large</p>
				<div class="form-group">
					<input class="form-control typeahead-only input-lg" type="text"
						id="typeahead-demo-01" /> <span
						class="form-control-feedback control-feedback-lg  fui-location"></span>
				</div>

				<p>Small</p>
				<div class="form-group">
					<input class="form-control typeahead-only input-sm" type="text"
						id="typeahead-demo-01" /> <span
						class="form-control-feedback control-feedback-sm fui-location"></span>
				</div>

			</div>
			<!-- /tags -->
		</div>
		<!-- /.row -->

		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="../../dist/js/vendor/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="../../dist/js/flat-ui.js"></script>

		<script src="../assets/js/application.js"></script>
		<script>

      var states = new Bloodhound({
        datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.word); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 4,
        local: [
          { word: "Alabama" },
          { word: "Alaska" },
          { word: "Arizona" },
          { word: "Arkansas" },
          { word: "California" },
          { word: "Colorado" }
        ]
      });

      states.initialize();

      $('input.tagsinput').tagsinput();

      $('input.tagsinput-typeahead').tagsinput('input').typeahead(null, {
        name: 'states',
        displayKey: 'word',
        source: states.ttAdapter()
      });

      $('input.typeahead-only').typeahead(null, {
        name: 'states',
        displayKey: 'word',
        source: states.ttAdapter()
      });

    </script>
</body>
</html>
